$(function () {
  let layer = layui.layer;
  let index;

  renderPage();

  //  1. 发起请求，获取文章类别的数据  vue  react angular 小程序
  function renderPage() {
    $.ajax({
      url: '/my/article/cates',
      method: 'GET',
      success: function (res) {
        // console.log(res);
        if (res.status === 0) {
          // res.data;  {data: []}
          // 下面这个函数就是 art-template模板引擎，将我们的模板 和 服务器返回的数据结合起来的一个函数
          let htmlStr = template('cat_list', res);
          // console.log(htmlStr);
          $('tbody').html(htmlStr);
        }
      },
    });
  }

  // 给添加分类绑定一个事件
  $('#addCate').on('click', function () {
    // console.log($('#dialog-add').html());
    index = layer.open({
      // content: '<h1>测试</h1>',
      content: $('#dialog-add').html(),
      type: 1,
      area: ['500px', '250px'],
      title: '添加文章分类',
    });
  });

  console.log($('#btnAdd'));
  // 加上元素是动态追加的，直接绑定事件是绑定不上去的
  // 一般采用事件委托的方式； 给页面上已经存在的元素绑定事件,然后再委托给对应的元素
  // $('body').on('click', '#btnAdd', function () {
  //   console.log(123);
  // });

  $('body').on('submit', '#form-add', function (e) {
    e.preventDefault();

    $.ajax({
      url: '/my/article/addcates',
      method: 'POST',
      data: {
        name: $('[name=name]').val(),
        alias: $('[name=alias]').val(),
      },
      success: function (res) {
        if (res.status === 0) {
          layer.close(index);
          renderPage();
        }
      },
    });
  });
});
